<style lang="less">
.echarts {
  width: 100%;
  height: 100%;
}
.echarts-tooltip {
  width: 178px;
  height: 48px;
  box-sizing: border-box;
  padding: 8px;
  background: rgba(244, 245, 247, .92) !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute;
  right: -5000px;
}
</style>

<template>
  <div class="echarts" ref="echartsRef"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const instace = getCurrentInstance();
const echartsRef = ref();
const myEcharts = ref();
const echartsOption = reactive({
  title: [
  {
    text: '4,342',
    textStyle: {
      color: '#262626',
      fontSize: 20,
      fontWeight: 600
    },
    top: '34%',
    left: 'center',
  }, 
  {
    text: '注册总人数',
    textStyle: {
      color: '#595959',
      fontSize: 12
    },
    top: '40%',
    left: 'center',
  }],
  tooltip: {
    trigger: "item",
    className: 'echarts-tooltip',
    formatter: function(params: {marker: string, name: string, value: string}) {
      let formatterText = `
      <div style="height:32px;display:flex;justify-content: space-between;align-items: center;background: #fff; padding: 0 8px;">
        <span>
          ${params.marker} ${params.name}
        </span>
        <span><span style="font-weight: 600;">${params.value}</span>人</span>
      </div>
       `;
      return formatterText;
    }
  },
  legend: [
    {
      bottom: 52,
      left: "center",
      icon: "circle",
      data: ["注册", "获取"],
      itemGap: 24,
    },
    {
      bottom: 22,
      left: "center",
      icon: "circle",
      data: ["激活", "留存", '营收'],
      itemGap: 24,
    },
  ],
  series: [
    {
      // name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      center: ["50%", "40%"],
      label: {
        position: "outside",
        formatter: '{d}%'
      },
      labelLine: {
        length: 3,
        length2: 10
      },
      emphasis: {
        disabled: true,
      },
      data: [
        { value: 342, name: "注册" },
        { value: 1000, name: "获取" },
        { value: 1500, name: "激活" },
        { value: 800, name: "留存" },
        { value: 200, name: "营收" },
      ],
    },
  ],
});

onMounted(() => {
  myEcharts.value = instace?.appContext.config.globalProperties.$echarts.init(
    echartsRef.value
  );
  myEcharts.value.setOption(echartsOption);
});
</script>
